<template>
  <div class="app-container">
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper">
        <div>
          <el-form :model="queryParams" :inline="true">
            <div class="form-row">
              <el-form-item label="项目名称">
                <el-input
                  v-model="queryParams.projectName"
                  placeholder="请输入平台类型"
                />
              </el-form-item>
              <el-form-item label="客户单位">
                <el-input
                  v-model="queryParams.customerUnit"
                  placeholder="请输入平台类型"
                />
              </el-form-item>
              <el-form-item label="客户类型">
                <el-input
                  v-model="queryParams.customerType"
                  placeholder="请输入客户类型"
                />
              </el-form-item>
              <el-form-item label="项目领域">
                <el-input
                  v-model="queryParams.projectField"
                  placeholder="请输入项目领域"
                />
              </el-form-item>
              <el-form-item label="存量类型">
                <el-input
                  v-model="queryParams.stockType"
                  placeholder="请输入存量类型"
                />
              </el-form-item>
            </div>
            <div class="form-row">
              <el-form-item label="重点项目">
                <el-select
                  v-model="queryParams.keyProject"
                  placeholder="重点项目"
                >
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="内容及要求">
                <el-input
                  v-model="queryParams.content"
                  placeholder="内容及要求"
                />
              </el-form-item>
              <el-form-item label="合同编码">
                <el-input
                  v-model="queryParams.contractNo"
                  placeholder="请输入平台类型"
                />
              </el-form-item>
              <el-form-item label="审批状态">
                <el-select v-model="queryParams.status" placeholder="待审批">
                  <el-option label="待审批" value="pending" />
                  <el-option label="已审批" value="approved" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleQuery"
                >搜索</el-button>
                <el-button
                  icon="el-icon-refresh"
                  @click="resetQuery"
                >重置</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>
    <el-card>
      <!-- 顶部操作按钮 -->
      <div class="operation-container">
        <el-button
          type="primary"
          size="small"
          class="filter-trigger"
          @click="isFilterVisible = !isFilterVisible"
        >{{ isFilterVisible ? "收起" : "检索" }}
          <i
            :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
          />
        </el-button>
        <el-button
          type="success"
          icon="el-icon-back"
          size="small"
          @click="handleBack"
        >撤回</el-button>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="40" />
        <el-table-column
          prop="id"
          label="序号"
          width="60"
          align="center"
        />
        <el-table-column
          prop="contractNo"
          label="合同编号"
          width="100"
        />
        <el-table-column
          prop="projectName"
          label="项目名称"
          min-width="200"
        />
        <el-table-column
          prop="customerUnit"
          label="客户单位"
          min-width="200"
        />
        <el-table-column
          prop="contractAmount"
          label="合同金额（元）"
          width="120"
          align="right"
        />
        <el-table-column
          prop="projectManager"
          label="项目负责人"
          width="100"
        />
        <el-table-column prop="status" label="审批状态" width="100">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="150"
        />
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: #409eff"
              @click="handleApprove(scope.row)"
            >审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 20px;" type="flex" justify="end">
        <el-pagination
          background
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProjectApproval',
  data() {
    return {
      tableData: [
        {
          id: 1,
          contractNo: '202501181',
          projectName: '供销社年度合作项目',
          customerUnit: '宁波市北仑区供销社有限公司',
          contractAmount: 296000,
          projectManager: '杜倩',
          status: '待审批',
          createTime: '2025-01-18 00:00'
        }
      ],
      queryParams: {
        projectName: '',
        customerUnit: '',
        customerType: '',
        projectField: '',
        stockType: '',
        keyProject: '',
        content: '',
        contractNo: '',
        status: ''
      },
      // 是否到账
      accountOptions: [
        { label: '未到账', value: '1' },
        { label: '部分到账', value: '0' },
        { label: '已到账', value: '2' }
      ],
      isFilterVisible: false
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleApprove(row) {
      console.log('审批', row)
    },
    handleQuery() {
      console.log('查询参数：', this.queryParams)
    },
    resetQuery() {
      this.queryParams = {
        projectName: '',
        customerUnit: '',
        customerType: '',
        projectField: '',
        stockType: '',
        keyProject: '',
        content: '',
        contractNo: '',
        status: ''
      }
    }
  }
}
</script>
<style scoped>
.app-container {
  padding: 20px;
}

.operation-container {
  margin-bottom: 20px;
}

.operation-container .el-button {
  margin-right: 10px;
}

.search-form {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.form-row {
  display: flex;
  align-items: center;
  /* margin-bottom: 10px; */
}

.form-row:last-child {
  margin-bottom: 0;
}

:deep(.el-form-item) {
  margin-right: 20px;
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  color: #909399;
  font-size: 14px;
}

:deep(.el-input),
:deep(.el-select) {
  width: 180px;
}

.el-input {
  width: 177px;
}

.el-select {
  width: 177px;
}

/* 搜索按钮样式 */
.search-btn {
  background-color: #00ccff;
  border-color: #00ccff;
  margin-right: 10px;
}

.search-btn:hover {
  background-color: #33d6ff;
  border-color: #33d6ff;
}

/* 重置按钮样式 */
.reset-btn {
  color: #606266;
  background: #fff;
  border: 1px solid #dcdfe6;
}

.reset-btn:hover {
  color: #00ccff;
  border-color: #00ccff;
  background-color: #fff;
}

.search-wrapper {
  margin-bottom: 20px;
}

/* 按钮内的图标样式 */
.el-button i {
  margin-right: 5px;
}

/* 确保表格内容不会被截断 */
.el-table .cell {
  white-space: nowrap;
}

/* 调整按钮样式 */
.el-button--text {
  padding: 0;
  margin: 0;
}

/* 调整表格行高 */
.el-table td {
  padding: 8px 0;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
